import React from 'react'
import {Row, Col, Button, Table,} from 'antd';

import {InfoOutlined,EllipsisOutlined} from '@ant-design/icons';
import './VehicleManage.css'

const columns = [
    {
        title: '车辆',
        dataIndex: 'car',
    },
    {
        title: '车辆类型',
        dataIndex: 'carType',
    },
    {
        title: '载重',
        dataIndex: 'load',
    },
    {
        title: '司机',
        dataIndex: 'driver',
    },
    {
        title: '',
        key: 'action',
        align:'right',
        width:'3rem',
        render: () => (
            <span>
        <span style={{marginRight: 16}}><EllipsisOutlined /> </span>

      </span>
        ),
    },
];
const tableData = [
    {
        car:'集装箱拖车',
        carType: '卡车',
        load: '50T',
        driver: '王大强',

    },
    {
        car:'集装箱拖车',
        carType: '卡车',
        load: '50T',
        driver: '王大强',

    },
    {
        car:'集装箱拖车',
        carType: '卡车',
        load: '50T',
        driver: '王大强',

    },
    {
        car:'集装箱拖车',
        carType: '卡车',
        load: '50T',
        driver: '王大强',

    },
    {
        car:'集装箱拖车',
        carType: '卡车',
        load: '50T',
        driver: '王大强',

    },
    {
        car:'集装箱拖车',
        carType: '卡车',
        load: '50T',
        driver: '王大强',

    },

];
class VehicleManage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {


        return (
            <div style={{padding: 10}}>
                <Row align='middle'>

                    <Col span={22}>
                        <InfoOutlined style={{padding:'.1rem',backgroundColor:'#F6B55A',borderRadius:'50%',color:'white'}}/>     <span>车辆必须绑定司机，维护好车辆载重信息，运力分配更合理。安排司机分配任务时，请确保司机拥有对应的客户权限。</span>
                    </Col>


                    <Col span={2} align='right'>
                        <Button style={{
                            marginLeft: 20,
                            width: 80,
                            borderRadius: 4,
                            backgroundColor: '#12C09F',
                            color: 'white'
                        }}>新增</Button>
                    </Col>

                </Row>
                <Row style={{ marginTop: 10}}>
                    <Table
                        // rowSelection={{
                        //     ...rowSelection,
                        // }}
                        pagination={{position: ['none', 'bottomRight'], pageSize: 5}}
                        columns={columns}
                        dataSource={tableData}
                        className='table'
                    />
                </Row>
            </div>

        )

    }
}

export default VehicleManage